import { ElLoading, ElMessage } from 'element-plus'
import { useWebNotification } from '@vueuse/core'

let loadingInstance = null
const showLoading = function (options = {}) {
  loadingInstance = ElLoading.service({
    lock: true,
    text: options.text || 'Loading'
  })
}
const hideLoading = function () {
  loadingInstance.close()
}

// Vueuse系统级别的弹窗提示
const showNotify = function (options = {}) {
  const UseWebNotificationOptions = {
    title: options.text || '通知',
    body: options.body || '',
    dir: 'auto',
    lang: 'en',
    renotify: true,
    tag: 'notify',
  }
  const {
    isSupported, // 是否支持API
    show // 显示通知函数
  } = useWebNotification(UseWebNotificationOptions)
  if (isSupported) {
    show()
  } else {
    console.log('浏览器不支持通知API')
  }
}

// 浏览器级别的弹窗提示
const showMsg = function (options = {}) {
  ElMessage({
    type: options.type || 'success',
    message: options.text || '通知',
    duration: options.duration || 3000,
    onClose: options.onClose || null,
    grouping: options.grouping ?? true,
    'show-close': options.showClose ?? true
  })
}

export default {
  showLoading,
  hideLoading,
  showNotify,
  showMsg
}